<!-- venobox css -->
<link rel="stylesheet" href="/hotel/css/venobox.css">
<!-- custom styles for this template -->
<link href="/hotel/css/custom.css" rel="stylesheet">
<link href="/hotel/css/responsive.css" rel="stylesheet">
<link href="/hotel/css/helper.css" rel="stylesheet">

<div id="myOrderDiv">
    <!-- blog breadcrumb version one strat here -->
    <section class="breadcrumb-blog-version-one">
        <div class="single-bredcurms" style="background-image:url('/reception/images/bercums/contact-page.jpg');">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="bredcrums-content">
                            <h2>订单</h2>
                            <ul>
                                <li><a href="index.html">订单</a></li>
                                <li class="active"><a href="contact.html">我的订单</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- blog breadcrumb version one end here -->

    <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                   aria-controls="v-pills-home" aria-selected="true">旅游订单</a>
                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
                   aria-controls="v-pills-profile" aria-selected="false">酒店订单</a>
            </div>
        </div>
        <div class="col-9">
            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                     aria-labelledby="v-pills-home-tab">

                    <div>
                        <!--<div class="col-lg-6 col-md-6" v-for="order in orders">
                            <div class="testimonial-box position-relative shadow rounded mb-30">
                                <div class="text-muted border-bottom font-italic pb-3">
                                    <p>订单人姓名：{{order.orderName}}</p>
                                    <p>订单时间：{{order.time}}</p>
                                    <p>订单价格：<span style="color: #761c19;font-size: 18px;font-weight: bold;">{{order.price}}</span></p>
                                </div>
                                <div class="reviewer d-inline-block">
                                    <img :src="order.hotelMain.hotelDetail.detailImages[0].image" class="img-thumbnail" alt="">
                                    <div class="content d-block overflow-hidden">
                                        <h4 class="name mb-0 text-uppercase">{{order.hotelMain.hotelName}}</h4>
                                    </div>
                                    <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
                                </div>
                            </div>
                        </div>-->
                        <div class="card mb-3" style="max-width: 540px;" v-for="order in orders1">
                            <div class="row no-gutters">
                                <div class="col-md-4">
                                    <img :src="order.route.tourismImage[0].url" alt="" class="w-100"
                                         style="height: 100%;">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <p>旅行社：{{order.route.user.userName}}</p>
                                        <p>订单时间：{{order.orderingTime}}</p>
                                        <p>订单名称：{{order.route.title}}</p>
                                        <p>订单价格：<span style="color: #761c19;font-size: 18px;font-weight: bold;">{{order.route.price}}</span>
                                        </p>
                                        <p>状态：
                                            <span v-if="order.status === '1'"
                                                  style="color: #00A8FF;font-size: 18px;font-weight: bold;">已出行</span>
                                            <span v-else
                                                  style="color: #0dc143;font-size: 18px;font-weight: bold;">未出行</span>
                                        </p>
                                        <button v-if="order.comment === '0'" class="btn btn-outline-success"
                                                data-toggle="modal"
                                                data-target="#commentModal"
                                                @click="initRouteEvaluation(order.route.id,order)"
                                                style="float: right;">评价
                                        </button>
                                        <button v-else class="btn btn-outline-success"
                                                disabled="disabled"
                                                style="float: right;">已评价
                                        </button>
                                        <button class="btn btn-outline-success" data-toggle="modal"
                                                data-target="#exampleModal1"
                                                @click="initOrder1(order)"
                                                style="float: right;">查看详情
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel1">订单详情</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div>
                                            <h4>行程资料</h4>
                                            <h5>路线信息</h5>
                                            <p>
                                                <span style="font-weight: bold;color: #5cb85c;">起点：</span>{{obj.route.startPoint}}
                                            </p>
                                            <p>
                                                <span style="font-weight: bold;color: #5cb85c;">终点：</span>{{obj.route.terminalPoint}}
                                            </p>
                                            <p>
                                                <span style="font-weight: bold;color: #5cb85c;">日期：</span>{{obj.route.startDate}}&nbsp;----&nbsp;{{obj.route.terminalDate}}
                                            </p>
                                            <p>
                                                <span style="font-weight: bold;color: #5cb85c;">类型：</span>{{obj.route.type}}
                                            </p>
                                            <p>
                                                <span style="font-weight: bold;color: #5cb85c;">等级：</span><i
                                                    class="fa fa-star"
                                                    v-for="j in obj.route.level"></i>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">

                                        <h5 class="modal-title" id="commentLabel">您的评价</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label for="comment-level" class="col-form-label">(1-5之间)评级:</label>
                                                <input type="number" v-model="routeEvaluation.star" max="5" min="1"
                                                       id="comment-level"
                                                       class="form-control" aria-label="Sizing example input"
                                                       aria-describedby="inputGroup-sizing-sm">
                                            </div>
                                            <div class="form-group">
                                                <label for="comment-text" class="col-form-label">其他旅客可能需要你的建议哦:</label>
                                                <textarea v-model="routeEvaluation.message" class="form-control"
                                                          id="comment-text"></textarea>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary" onclick="submitRouteEvaluation()">
                                            确认评价
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                    <div class="row">
                        <div class="col-sm-6" v-for="order in orders">
                            <div class="card mb-3">
                                <div class="row no-gutters">
                                    <div class="col-md-4">
                                        <img :src="order.hotelMain.hotelDetail.detailImages[0].image" alt=""
                                             class="w-100"
                                             style="height: 100%;">
                                    </div>
                                    <div class="col-md-8">
                                        <div class="card-body">
                                            <p>订单人姓名：{{order.orderName}}</p>
                                            <p>订单时间：{{order.time}}</p>
                                            <p>酒店名称：{{order.hotelMain.hotelName}}</p>
                                            <p>订单价格：<span
                                                    style="color: #761c19;font-size: 18px;font-weight: bold;">{{order.price}}</span>
                                            </p>
                                            <button v-if="order.comment==null" class="btn btn-outline-success"
                                                    data-toggle="modal"
                                                    data-target="#comment" @click="initComment(order)">
                                                评论
                                            </button>
                                            <button class="btn btn-outline-success" data-toggle="modal"
                                                    data-target="#exampleModal"
                                                    @click="initOrder(order)">查看详情
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单详情 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">订单详情</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <h4>住客资料</h4>
                        <h5>入住人信息</h5>
                        <p>
                            <span style="font-weight: bold;color: #5cb85c;">住客姓名：</span>{{order.orderName}}
                        </p>
                        <p>
                            <span style="font-weight: bold;color: #5cb85c;">入住日期：</span>{{order.checkIn}}--{{order.checkOut}}
                        </p>
                        <p>
                            <span style="font-weight: bold;color: #5cb85c;">特别要求：</span>{{order.specially}}
                        </p>
                        <p>
                            <span style="font-weight: bold;color: #5cb85c;">订单价格</span>{{order.price}}
                        </p>
                    </div>
                    <div v-if="order.comment!==null">
                        <h4>评论</h4>
                        <p>
                            {{order.comment.detail}}
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论 -->
    <div class="modal fade" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">评论</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <h5>请对这次入住进行评论</h5>
                        <div class="form-group">
                            <textarea rows="5" class="form-control" id="hotelDetail" placeholder="请填写您的评论"
                                      v-model:value="comment.detail">
                             </textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="insertComment()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var myOrderVue = new Vue({
        el: "#myOrderDiv",
        data: {
            orders: [],
            order: {
                comment: {
                    detail: ""
                }
            },
            comment: {
                id: "",
                pid: 0,
                detail: "",
                orderId: "",
                userId: $("#userId").val()
            },
            orders1: [],
            obj: {
                route: {
                    user: {}
                }
            },
            routeEvaluation: {
                time: "",
                message: "",
                star: "",
                fkUserId: $("#userId").val(),
                fkRouteId: "",
            },
            routeOrder: {},
        },
        methods: {
            initPage: function () {
                var self = this;
                $.ajax({
                    url: "/api/hotelOrders/" + $("#userId").val(),
                    type: "get",
                    success: function (rs) {
                        self.orders = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            initOrder: function (order) {
                var self = this;
                self.order = order;
            },
            initComment: function (order) {
                var self = this;
                self.comment.orderId = order.orderId;
            },
            insertComment: function () {
                var self = this;
                $.ajax({
                    url: "/api/comment",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.comment),
                    success: function (rs) {
                        if (rs.status === 200) {
                            layer.alert("评论成功", {icon: 0});
                            setTimeout(
                                window.location.reload(), 3000
                            );
                        } else {
                            layer.alert(rs.message, {icon: 0});
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },

            initPage1: function () {
                var self = this;
                $.ajax({
                    url: "/api/routeOrder/" + $("#userId").val(),
                    dataType: "json",
                    type: "get",
                    success: function (rs) {
                        self.orders1 = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
                // 对Date的扩展，将 Date 转化为指定格式的String
                // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
                // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
                Date.prototype.Format = function (fmt) { //author: meizz
                    var o = {
                        "M+": this.getMonth() + 1, //月份
                        "d+": this.getDate(), //日
                        "h+": this.getHours(), //小时
                        "m+": this.getMinutes(), //分
                        "s+": this.getSeconds(), //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds() //毫秒
                    };
                    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }
            },
            initOrder1: function (obj) {
                this.obj = obj;
            },
            initRouteEvaluation: function (routeId, routeOrder) {
                this.routeEvaluation.fkRouteId = routeId;
                this.routeOrder = routeOrder;
            },
            submitRouteEvaluation: function () {
                this.routeEvaluation.time = new Date().Format("yyyy-MM-dd hh:mm:ss");
                this.routeEvaluation.uid = 0;
                var self = this;
                $.ajax({
                    type: "POST",
                    url: "/api/routeEvaluation",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(self.routeEvaluation),
                    success: function (rs) {
                        layer.alert(rs.message, {icon: 0});
                        self.routeOrder.comment = '1';
                        if (rs.status === 200) {
                            console.log(self.routeOrder);
                            $.ajax({
                                url: "/api/routeOrder",
                                type: "PUT",
                                contentType: "application/json",
                                dataType: "json",
                                data: JSON.stringify(self.routeOrder),
                                success: function (rs) {
                                    if (rs.status === 200) {
                                        location.reload();
                                    } else {
                                        layer.alert(rs.message, {icon: 0})
                                    }
                                },
                                error: function () {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            })
                        } else {
                            layer.alert(rs.message, {icon: 0})
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
        },
        created: function () {
            window.insertComment = this.insertComment;
            window.submitRouteEvaluation = this.submitRouteEvaluation;
        },
        mounted: function () {
            this.initPage();
            this.initPage1();
        }
    })
</script>
